<!DOCTYPE HTML>
<html lang="utf-8">
<head>
<meta charset="utf-8">
<title>驾车宝典-${viewMember.nickName!}的话题</title>
<link href="${ctx}/styles/group.css" rel="stylesheet" type="text/css">
<link href="${ctx}/styles/userPanel.css" rel="stylesheet" type="text/css">
<#include '/baseHead.ftl'>
<style>
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
		position:absolute;
		background:#FFF;
		border: 1px solid #333;
		width: 6px;
		height: 6px;
		z-index:500;
		font-size:0;
		opacity: 0.5;
		filter:alpha(opacity=50);
	}
	#rLeftDown,#rRightUp{cursor:ne-resize;}
	#rRightDown,#rLeftUp{cursor:nw-resize;}
	#rRight,#rLeft{cursor:e-resize;}
	#rUp,#rDown{cursor:n-resize;}
	#rLeftDown{left:-4px;bottom:-4px;}
	#rRightUp{right:-4px;top:-4px;}
	#rRightDown{right:-4px;bottom:-4px;background-color:#00F;}
	#rLeftUp{left:-4px;top:-4px;}
	#rRight{right:-4px;top:50%;margin-top:-4px;}
	#rLeft{left:-4px;top:50%;margin-top:-4px;}
	#rUp{top:-4px;left:50%;margin-left:-4px;}
	#rDown{bottom:-4px;left:50%;margin-left:-4px;}
	#bgDiv{width:200px; height:200px; border:1px solid #666666; position:relative;}
	#dragDiv{border:1px solid #fff; width:130px; height:130px; top:35px; left:35px; cursor:move; border-color:gray;}
</style>
<!--主要部分开始-->
<section id="main"><div class="bgA_01">
	
	<div class="userNavPanel_03"><div class="bgP_01">
		<#include 'setting.ftl'>
	</div></div>
	
	<div class="userChangeHeadPanel_01"><!--这个功能块里的button标签可根据需要在 span button a 三种标签中调换  下面头像部分除最大的图外 可根据情况定制图片尺寸 设计图上没有设计 80x80 和 60x60 这两种常见尺寸的头像-->
		<div class="btnField">
			<!--<p><button class="btn btn1" title="本地照片">本地照片</button> -->
			<span id="uploadSpan">
			<input type='file' id="fileName" name="fileName">
			</span>
			<!--<button class="btn btn1" title="拍照上传">拍照上传</button></p>-->
			<p>仅支持jpg，gif，png，且小于5M。</p>
		</div>
		<div class="imgListField">
			<div class="imgL" id="bgDiv" style="width:300px;height:300px;">
				 <div id="dragDiv" style="border: 1px solid #fff;width: 180px;height: 180px;top: 35px;left: 35px;cursor: move;border-color: gray;">
											<div id="rRightDown"></div>
											<div id="rLeftDown"></div>
											<div id="rRightUp"></div>
											<div id="rLeftUp"></div>
											<div id="rRight"></div>
											<div id="rLeft"></div>
											<div id="rUp"></div>
											<div id="rDown"></div>
										</div>
				 
				<!--
				<div class="control">
					<button class="btn btn2" title="向右旋转">向右旋转</button>
					<button class="btn btn1" title="向左旋转">向左旋转</button>
				</div>
				-->
			</div>
			<div class="imgM">
				<div class="text">
					<p>您上传的头像会自动生成三种尺寸，<br>请注意中小尺寸的头像是否清晰。</p>
				</div>
				<div class="img" id="viewDiv">
					<span><img src="${ctx}/images/pic_header_07.jpg" width="180" height="180" alt=""></span>
				</div>
				<div class="info">
					<p>大尺寸头像，180x180头像。</p>
				</div>
			</div>
			<div class="imgS">
				<div class="img">
					<span><img src="${ctx}/images/pic_header_08.jpg" width="50" height="50" alt=""></span>
				</div>
				<div class="info">
					<p>中尺寸头像</p>
					<p>50x50头像</p>
					<p>(自动生成)</p>
				</div>
				<div class="img">
					<span><img src="${ctx}/images/pic_header_09.jpg" width="30" height="30" alt=""></span>
				</div>
				<div class="info">
					<p>小尺寸头像</p>
					<p>30x30头像</p>
					<p>(自动生成)</p>
				</div>
			</div>
		</div>
		<div class="submitField">
			<button  class="btn btn1"  onclick='changeHeadAction();' title="点击保存">保存</button>
			<!--<button class="btn btn1" title="取消">取消</button> -->
		</div>
	</div>
				
<#include '/commonFriendLink.ftl'>
	<!--<iframe src="/freemarker/setpage/choosehead.html" name="if1" id="if1" scrolling="no" width="600" height="250" frameborder="0"></iframe>-->

</div></section>
<!--主要部分结束-->
<#include '/baseFoot.ftl'>
<script src="${ctx}/scripts/uiDraggable.js" type="text/javascript"></script>
<script src="${ctx}/scripts/ajaxfileupload.js" type="text/javascript"></script>

<script type="text/javascript">
//http://www.css88.com/archives/2343   js操作iframe
//获取iframe下的对象
//param ifame : iframe的name名称;childId : iframe中的元素id
function getIframe(iframeName,childId){
	return window.frames[iframeName].document.getElementById(childId);
}
function getIFrameDOM(id){
	return document.getElementById(id).contentDocument || document.frames[id].document;
}
var ic = new ImgCropper("bgDiv", "dragDiv", "${ctx}/images/pic_header_06.jpg", "testImg", {
	Width: 300, Height: 300, Color: "#fff",
	Resize: true,
	Right: "rRight", Left: "rLeft", Up:	"rUp", Down: "rDown",
	RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
	Scale:true,Preview: "viewDiv", viewWidth: 180, viewHeight: 180 
});
//清空 FileUpload 控件值
//param uoloadSpanId : 待清空file控件所属的span的id
function clearFile(uoloadSpanId){
	//适用IE、ff等浏览器
	var uploadSpan = document.getElementById(uoloadSpanId);
	uploadSpan.innerHTML = uploadSpan.innerHTML;
}
var headNamePath = "";
//上传图片
$("#fileName").live("change",function(){
	var value = $("#fileName").val();
	var ext = value.substring(value.lastIndexOf(".") + 1).toLowerCase();
	//alert(ext);
	if(ext == null || ext == "" || (ext != "jpg" && ext != "gif" && ext != "bmp" && ext != "jpeg" && ext != "png")){
		alert("只能上传JPG、GIF、BMP、JPEG、PNG格式的图片！");
		document.getElementById("fileName").value = "aa";
		clearFile("uploadSpan");
		return;
	}
	$.ajaxFileUpload({
		url:"${ctx}/image/uploadimage",
		secureuri:false,
		dataType:'json',
		type:"post",
		fileElementId:"fileName",
		beforeSend:function(){//上传前需要处理的工作，如显示Loading...
			ic.Url = "/images/M1/loading.gif";
			ic.Init();
  		},
  		data:{filename:"fileName"},
		success: function (data, status){
			if(data == 0){
				alert("你选择的图片过大,请重新选择");
				return;
			}
			$("#isUpload").val("true");
			ic.Url = data.url;
			headNamePath = data.url;
			ic.Init();
		},
		error: function (data, status, e){
		}
	});
})


function changeHeadAction(){
	if(headNamePath  == ""){
		alert("请上传您的自定义头像!");
		return;
	}
	var p = ic.Url, o = ic.GetPos();
	x = o.Left;
	y = o.Top;
	if(x < 0){
		x = 0;
	}
	if(y < 0){
		y = 0;
	}
	cutWidth = o.Width;
	cutHeight = o.Height;
	width = ic._layBase.width;
	height = ic._layBase.height;
	var imageProperty = x + "," + y + "," + cutWidth + "," + cutHeight + "," + width + "," + height;
	
		$.ajax({
		 			type: "get",
					url: "${ctx}/member/changeHeadAction",
					beforeSend: function(XMLHttpRequest){
					//ShowLoading();
					},
					success: function(data, textStatus){
						window.location.reload();
					},
					data:{
						"imageProperty":imageProperty,
						"headNamePath":headNamePath
					},
					dataType:'json'
				}
	 		)
}
</script>
